<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />

		<title>DataTables example</title>
		<style type="text/css" title="currentStyle">
			@import "../DataTables-1.9.4/media/css/demo_page.css";
			@import "../DataTables-1.9.4/media/css/demo_table.css";
		</style>
		<script type="text/javascript" language="javascript" src="../DataTables-1.9.4/media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="../DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
		<script src="../Highcharts-3.0.1/js/highcharts.js"></script>
		<script src="../Highcharts-3.0.1/js/highcharts-more.js"></script>
		<script src="../Highcharts-3.0.1/js/modules/exporting.js"></script>
		<script src="../TrackTables-0.0.1/tracktables_0.1.js"></script>
				<script>


					/* Data set */

									NameIndex = [0];
								    ChartColnames = ["Name",'Peaks', 'Genes',
								                   'PeaksInGenes', 'Motifs', 'Co-occur',
								                   "BigWig",
								                   1,2,3,4,5,6,7,8,9,10,12,13,14,15,16,17,18,19,21,22,23,24,25,26,27,28,29,31,32,33,34,35,36,37,38,39,41,42,43,44,45,46,47,48,49,51,
								                   "Samples","Inputs",
								                   ];

								    Data=[
								    ["Tom",5,3,10,7,2,"C:\Users\carrol09\Desktop\carrollt\ExampleChIP\Coverage\S13-AR-CHIP-LNCAP-LM-HES6-BICALUTAMIDE.bwa_Processed.bw",1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,3,3,3,3,4,4,4,5,5,5,3,3,3,3,3,2,2,2,2,2,1,1,1,1,0.8,10,12,13,18,20],
								    ["Bill",2, 2, 3,2, 1,"C:\Users\carrol09\Desktop\carrollt\ExampleChIP\Coverage\S11-E2F1-CHIP-LNCAP-LM-HES6-VEHICLE.bwa_Processed.bw",1,2,3,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.5,10,12,14,18,20],
								    ["Ted",3, 4, 4, 2, 5,"C:\Users\carrol09\Desktop\carrollt\ExampleChIP\Coverage\S12-E2F1-CHIP-LNCAP-LM-HES6-VEHICLE.bwa_Processed.bw",1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,4,9,9,9,4,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1.3,0.3,10,12,15,18,20]
								    ];


								  	ChartIndex =[1,2,3,5];
									var Trial = '#container2'

								  	var crazy;						
									var Trial2 = '#dynamic'
									var Trial3 = "#example"
								  	ChartIndex2 =[0,1,2,3,4];

									var crazy2;
									var Trial21 = '#dynamic1'
									var Trial31 = "#example1"
								  	ChartIndex21 =[0,1,3,4];

								  	ChartIndex3 =[7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51];
									var Trial4 = '#container3'

								  	ChartIndex4 =[53,54];
									var Trial5 = '#container4'

									ChartIndex5 =[55,56,57,58,59];
									var Trial6 = '#container5'

//var nameIndex = [0];
//var chartColnames = ["Name",'Peaks', 'Genes','PeaksInGenes', 'Motifs', 'Co-occur',"BigWig",								                   1,2,3,4,5,6,7,8,9,10,12,13,14,15,16,17,18,19,21,22,23,24,25,26,27,28,29,31,32,33,34,35,36,37,38,39,41,42,43,44,45,46,47,48,49,51,
//"Samples","Inputs",
//];

//var data=
//[
//["Tom",5,3,10,7,2,"C:\Users\carrol09\Desktop\carrollt\ExampleChIP\Coverage\S13-AR-CHIP-LNCAP-LM-HES6-//BICALUTAMIDE.bwa_Processed.bw",1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,3,3,3,3,4,4,4,5,5,5,3,3,3,3,3,2,2,2,2,2,1,1,1,1,0.8,10,12,13,18,20],
//["Bill",2, 2, 3,2, 1,"C:\Users\carrol09\Desktop\carrollt\ExampleChIP\Coverage\S11-E2F1-CHIP-LNCAP-LM-HES6-VEHICLE.bwa_Processed.bw",1,2,3,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0.5,10,12,14,18,20],
//["Ted",3, 4, 4, 2, 5,"C:\Users\carrol09\Desktop\carrollt\ExampleChIP\Coverage\S12-E2F1-CHIP-LNCAP-LM-HES6-VEHICLE.bwa_Processed.bw",1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,4,9,9,9,4,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1.3,0.3,10,12,15,18,20]
//];


var allChartIndicies = [[1,2,3,5],[7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],[53,54],[55,56,57,58,59]]
var allChartNames = ["#container2","#container3","#container4","#container5"]

var allTableIndicies = [[0,1,2,3,4],[0,1,3,4]]
var allTableNames = [["#dynamic","#example"],["#dynamic1","#example1"]]
var allChartTypes = ["barchart","linechart","bubblechart","boxplot"]


function HighTables(data,nameIndex,chartColnames,allChartNames,allChartIndicies,allTableNames,allTableIndicies,allChartTypes)
{


this.data=data
this.chartIndicies=allChartIndicies
this.chartNames=allChartNames
this.tableNames=allTableNames
this.tableIndicies=allTableIndicies
this.nameIndex=nameIndex
this.chartColnames = chartColnames
this.chartTypes= allChartTypes


}




functionAtRedraw = function () {

			if ( typeof crazy != 'undefined' ) {
									var divsObject = document.getElementsByTagName("div");
									console.log(divsObject[0])
									console.log(divsObject)
									for(var i = 0; i < divsObject.length; i++){
									   //do something to each div like
									   console.log(divsObject[i].id);
			}
				var filtIndex = crazy.fnGetColumnData(0)
				DataTemp2 = filterMainTable(Data,filtIndex)
				var oSettings = crazy.fnSettings();
				console.log(oSettings.oPreviousSearch.sSearch)
				highChart = make2dArrayForHighChartsBar(ChartColnames,DataTemp2,ChartIndex,NameIndex)
				makeHighChartBar(highChart,Trial)

				highChartline = make2dArrayForHighChartsLine(ChartColnames,DataTemp2,ChartIndex3,NameIndex)
				makeHighChartLine(highChartline,Trial4)

				highChartBubbleByCat = make2dArrayForHighChartsBubbles(ChartColnames,DataTemp2,ChartIndex4,NameIndex)
				makeHighChartBubbleByCategory(highChartBubbleByCat,Trial5)

				highChartBoxPlot = make2dArrayForHighChartsBoxplot(ChartColnames,DataTemp2,ChartIndex5,NameIndex)
				makeHighChartBoxPlot(highChartBoxPlot,Trial6)
			}

		}


functionAtRedraw2 = function () {

			if ( typeof crazy2 != 'undefined' ) {
									var divsObject = document.getElementsByTagName("div");
									console.log(divsObject[0])
									console.log(divsObject)
									for(var i = 0; i < divsObject.length; i++){
									   //do something to each div like
									   console.log(divsObject[i].id);
			}
				var filtIndex = crazy2.fnGetColumnData(0)
				DataTemp2 = filterMainTable(Data,filtIndex)
				var oSettings = crazy2.fnSettings();
				console.log(oSettings.oPreviousSearch.sSearch)

				highChart = make2dArrayForHighChartsBar(ChartColnames,DataTemp2,ChartIndex,NameIndex)
				makeHighChartBar(highChart,Trial)

				highChartline = make2dArrayForHighChartsLine(ChartColnames,DataTemp2,ChartIndex3,NameIndex)
				makeHighChartLine(highChartline,Trial4)

				highChartBubbleByCat = make2dArrayForHighChartsBubbles(ChartColnames,DataTemp2,ChartIndex4,NameIndex)
				makeHighChartBubbleByCategory(highChartBubbleByCat,Trial5)

				highChartBoxPlot = make2dArrayForHighChartsBoxplot(ChartColnames,DataTemp2,ChartIndex5,NameIndex)
				makeHighChartBoxPlot(highChartBoxPlot,Trial6)
			}

		}

makeDataTable = function (dataTable,Trial2,Trial3,functionAtRedraw,ToFilter) {
	$(Trial2).html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
	crazy = $(Trial3).dataTable( {
		"aaData": dataTable["aaData"],
		"aoColumns": dataTable["aoColumns"],
		"fnDrawCallback": functionAtRedraw,
		"oSearch": {"sSearch": ToFilter}
	} );
	crazy.fnGetColumnData();
	return crazy
}

makeDataTable2 = function (dataTable,Trial21,Trial31,functionAtRedraw,ToFilter) {
	$(Trial21).html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example1"></table>' );
	crazy2 = $(Trial31).dataTable( {
		"aaData": dataTable["aaData"],
		"aoColumns": dataTable["aoColumns"],
		"fnDrawCallback": functionAtRedraw,
		"oSearch": {"sSearch": ToFilter}
	} );
	crazy2.fnGetColumnData();
	return crazy2
}



$(document).ready(function() {

			var hightablesObj = new HighTables(Data,NameIndex,ChartColnames,allChartNames,allChartIndicies,allTableNames,allTableIndicies,allChartTypes)
			//console.log(hightablesObj.tableNames)
			//console.log(hightablesObj.tableNames.length)

				console.log(1)
				dataTable = make2dArrayForDataTable(hightablesObj.chartColnames,hightablesObj.data,hightablesObj.tableIndicies[0],hightablesObj.nameIndex)
				crazy = makeDataTable(dataTable,hightablesObj.tableNames[0][0],hightablesObj.tableNames[0][1],functionAtRedraw,"")
				dataTable2 = make2dArrayForDataTable(hightablesObj.chartColnames,hightablesObj.data,hightablesObj.tableIndicies[1],hightablesObj.nameIndex)
				crazy2 = makeDataTable2(dataTable,hightablesObj.tableNames[1][0],hightablesObj.tableNames[1][1],functionAtRedraw2,"")


			var ChartIndiciesBar = find("barchart",hightablesObj.chartTypes)
			var ChartIndiciesBubble = find("bubblechart",hightablesObj.chartTypes)
			var ChartIndiciesBox = find("boxplot",hightablesObj.chartTypes)
			var ChartIndiciesLine = find("linechart",hightablesObj.chartTypes)

			for (j=0;j<ChartIndiciesBar.length;j++)
			{
				highChart = make2dArrayForHighChartsBar(hightablesObj.chartColnames,hightablesObj.data,hightablesObj.chartIndicies[ChartIndiciesBar[j]],hightablesObj.nameIndex)
				makeHighChartBar(highChart,hightablesObj.chartNames[ChartIndiciesBar[j]])
			}
			for (j=0;j<ChartIndiciesBubble.length;j++)
			{
			highChartBubbleByCat = make2dArrayForHighChartsBubbles(hightablesObj.chartColnames,hightablesObj.data,hightablesObj.chartIndicies[ChartIndiciesBubble[j]],hightablesObj.nameIndex)
			makeHighChartBubbleByCategory(highChartBubbleByCat,hightablesObj.chartNames[ChartIndiciesBubble[j]])
			}


			for (j=0;j<ChartIndiciesBox.length;j++)
			{
			console.log(hightablesObj.chartIndicies[ChartIndiciesBox[j]])
			highChartBoxPlot = make2dArrayForHighChartsBoxplot(hightablesObj.chartColnames,hightablesObj.data,hightablesObj.chartIndicies[ChartIndiciesBox[j]],hightablesObj.nameIndex)
			console.log(highChartBoxPlot)
			makeHighChartBoxPlot(highChartBoxPlot,hightablesObj.chartNames[ChartIndiciesBox[[j]]])
			}


			for (j=0;j<ChartIndiciesLine.length;j++)
			{
			console.log(hightablesObj.chartIndicies[ChartIndiciesLine[j]])
			highChartline = make2dArrayForHighChartsLine(hightablesObj.chartColnames,hightablesObj.data,hightablesObj.chartIndicies[ChartIndiciesLine[j]],hightablesObj.nameIndex)
			console.log(highChartline)
			makeHighChartLine(highChartline,hightablesObj.chartNames[ChartIndiciesLine[[j]]])
			}


});





</script>

	</head>
	<body id="dt_example">
		<div id="container">
			<div class="full_width big">
				TrackTables Example
			</div>

			<h1>Preamble</h1>
			<p>Short demo to work with Highcharts, DataTables and dynamically link to IGV</p>

			<h1>Live example</h1>
			<div id="dynamic1"></div>
			<div class="spacer"></div>
			<div id="container2" style="height: 300px"></div>
			<div id="container3" style="height: 300px"></div>
			<div id="container4" style="height: 300px"></div>
			<div id="container5" style="height: 300px"></div>
			<div class="spacer"></div>
			<div id="dynamic"></div>
			<button onclick="myFunction()">Try it</button>
			  </body>
<
